<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-组件和Props</title>
    <script src="react.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="react-dom.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="babel.min.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script type="text/babel">
    //组件无论使用函数声明还是class声明，都决不能修改自身的props
    //1、函数组件(组件名称必须以大写字母开头)
    function Welcome01(props) {
        return <h1>Welcome01 - Hello {props.name}</h1>;
    }

    //2、class组件(组件名称必须以大写字母开头)
    class Welcome02 extends React.Component {
        render(){
            return <h1>Welcome02 - Hello {this.props.name}</h1>;
        }
    }

    //3、组合组件(组件名称必须以大写字母开头)
    function Welcome03() {
        return (
            <div>
                <Welcome01 name="ccc" />
                <Welcome02 name="ddd" />
            </div>
        );
    }

    function Comment(props) {
        return (
            <div className="Comment">
                <div className="UserInfo">
                    <img src={props.author.avatarUrl} alt={props.author.name}/>
                </div>
                <div className="UserInfo-name">
                    {props.author.name}
                </div>
                <div className="Comment-text">
                    {props.commentText}
                </div>
                <div className="Comment-date">
                    {props.commentDate}
                </div>
            </div>
        );
    }

    function GetAuthor(){
        return {
            avatarUrl: "https://img-home.csdnimg.cn/images/20201124032511.png",
            name: "ccc"
        };
    }

    const element01 = <Welcome01 name="aaa" />
    const element02 = <Welcome02 name="bbb" />
    const element03 = <Welcome03 name="xxx" />
    const element04 = <Comment author={GetAuthor()} commentText="评论的内容" commentDate={new Date().toLocaleTimeString() } />
    const element05 = <Comment author={{
                                        avatarUrl: "https://img-home.csdnimg.cn/images/20201124032511.png",
                                        name: "ccc"
                                    }}
                                commentText="评论的内容" commentDate={new Date().toLocaleTimeString() } />
    ReactDOM.render(element05, document.getElementById("app"));
    //ReactDOM.render(<Welcome03 name="xxx" />, document.getElementById("app"));
</script>
</html>